ESLintの設定をしたAngular 11のプロジェクトでVS CodeのExtension「ESLint」を使ってみた
こんにちは!DA(データアナリティクス)事業本部 インテグレーション部の大高です。
先日、Angular 11のプロジェクトをTSLintからESLintへとマイグレーションをしてみました。
その際に、普段利用しているエディタのVS CodeにExtension「ESLint」の設定も行ってみましたので、設定について書いていきたいと思います。
Extension「ESLint」の導入
これは特に問題ないかと思います。拡張機能メニューからdbaeumer.vscode-eslint
で検索し、ESLint
を「インストール」します。
ESLintを利用しているAngular 11のプロジェクトで試してみる
では、ESLintを利用しているAngular 11のプロジェクトで試してみたいと思います。プロジェクトは単純にng new
しただけのプロジェクトで、app.component.ts
を以下のようにリテラルをダブルクォーテーションで括るように修正しています。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = "eslint-sample"; //'eslint-sample'; }
エラーが出ている
この時点で、Parsing error: Cannot read file '/home/ec2-user/tsconfig.json'.eslint
というエラーが表示されました。
私はVS CodeでEC2インスタンスのホームディレクトリを「ワークスペース」として開いていたのですが、Angularのプロジェクトフォルダはホームディレクトリ配下のサブフォルダ内に存在しているため、どうもうまく認識してくれていないようです。
Extensionの設定を修正する
対応として、Extensionの設定を修正します。設定の変更は、以下の「拡張機能の設定」から開きます。
この中のWorking Directories
の設定を編集します。
eslint.workingDirectories
の値は、以下のように{ "mode": "auto" }
を指定します。
"eslint.workingDirectories": [ { "mode": "auto" } ]
これは、Extensionのページにも記載のある通り「package.json、.eslintignore、および.eslintrc*ファイルの場所に基づいて作業ディレクトリを推測する」というモードになります。Angularのプロジェクト配下にはpackage.jsonや.eslintrc.jsonファイルが存在しているため、このモードを利用するようにします。
[{ "mode": "auto" }] (@since 2.0.0): instructs ESLint to infer a working directory based on the location of package.json, .eslintignore and .eslintrc* files. This might work in many cases but can lead to unexpected results as well.
再度、試してみる
設定後に、再度app.component.ts
を開くと、想定通りにLinterが動作してくれました。
修正についても以下のようにクイックフィックスが利用できます。
ちゃんとESLintが直してくれましたね!
まとめ
以上、ESLintの設定をしたAngular 11のプロジェクトでVS CodeのExtension「ESLint」を使ってみました。Extensionを利用するとコーディング中にすぐに気付けるので、開発が捗りそうですね。
どなたかのお役に立てば幸いです。それでは!